<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>widget attribute unit test (in constructor and get()/set())</title>
	<style type="text/css">
		@import "../themes/claro/document.css";
		@import "css/dijitTests.css";
	</style>
	<script type="text/javascript" src="../../dojo/dojo.js"
		data-dojo-config="isDebug: true, async: true"></script>

	<script type="text/javascript">
		require([
			"doh/runner", "dojo/_base/declare",
			"dojo/dom", "dojo/dom-attr", "dojo/dom-class", "dojo/dom-style", "dojo/sniff",
			"dijit/_WidgetBase", "dijit/_Widget",
			"dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
			"dojo/domReady!"
		], function(doh, declare, dom, domAttr, domClass, domStyle, has,
					_WidgetBase, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin){

			doh.register("attributes", [
				// Test attributes mapped to DOMNodes
				function domMapping(){
					var IndividualMaps = declare([_WidgetBase, _TemplatedMixin], {
						// Mapping foo to this.domNode.foo
						foo:"",
						_setFooAttr: "",
		
						// Mapping bar to this.buttonNode.bar
						bar: "",
						_setBarAttr: "buttonNode",
		
						// Mapping plainText to this.plainTextNode.innerHTML
						plainText: "",
						_setPlainTextAttr: {node: "plainTextNode", type: "innerText"},

						templateString: "<div class='class1' style='border: 1px solid red; width: 456px'>" +
											"<button data-dojo-attach-point='buttonNode,focusNode'>hi</button>" +
											'<span><input data-dojo-attach-point="inputNode" value="input"></span>' +
											"<span data-dojo-attach-point='containerNode'></span>" +
											"<span data-dojo-attach-point='plainTextNode'>original plain text</span>" +
										"</div>"
					});

					var widget = new IndividualMaps({
						foo:"value1",
						bar:"value2",
						"class":"class2",
						style:"height: 123px",
						plainText: "hello world <>&;",
						"name-with-dashes": "name with dashes"
					}).placeAt(dom.byId("wrapper"));

					// test attributes specified to constructor were copied over to DOM
					doh.is("value1", widget.domNode.getAttribute("foo"), "widget.domNode.getAttribute('foo')");
					doh.is("value2", widget.buttonNode.getAttribute("bar"), "widget.domNode.getAttribute('bar')");
					doh.t(domClass.contains(widget.domNode, "class1"), "class1");
					doh.t(domClass.contains(widget.domNode, "class2"), "class2");
					doh.is("123px", widget.domNode.style.height, "height");
					doh.is("456px", widget.domNode.style.width, "width");
					doh.is("hello world &lt;&gt;&amp;;", widget.plainTextNode.innerHTML, "innerHTML");
				},

				// Test attributes mapped to subwidgets
				function subwidgetMapping(){
					declare("MySubWidget", [_WidgetBase], {
						_setFooAttr: function(val){
							this.foo = val;
							this.gotValue = true;	// set flag for testing purposes
						}
					});
					var IndividualMaps = declare(
							[_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

						// Mapping foo to this.subwidget.foo
						foo:"",
						_setFooAttr: "subwidget",

						templateString:
							"<div class='class1' style='border: 1px solid red; width: 456px'>" +
								"<button data-dojo-type='MySubWidget' data-dojo-attach-point='subwidget'>hi</button>" +
							"</div>"
					});

					var widget = new IndividualMaps({
						foo: "value1"
					}).placeAt(dom.byId("wrapper"));

					// test attribute specified to constructor was copied over to subwidget
					doh.is("value1", widget.subwidget.get("foo"), "widget.subwidget.get('foo')");
					doh.t(widget.subwidget.gotValue, "gotValue");
				},

				// Test that certain attributes are automatically applied to focusNode or domNode.
				// These are attributes that aren't mentioned at all in _WidgetBase.
				function autoDomMapping(){
					// Mapping to this.domNode
					var w = new _WidgetBase({
						title: "dom title",
						"aria-labelledby": "foo",
						role: "button"
					});
					doh.is("dom title", domAttr.get(w.domNode, "title"), "domNode title");
					doh.is("foo", w.domNode.getAttribute("aria-labelledby", "domNode labelledby"));
					doh.is("button", domAttr.get(w.domNode, "role"), "domNode role");

					// Mapping to this.focusNode
					var fw = new (declare([_WidgetBase, _TemplatedMixin], {
						templateString: "<div><input data-dojo-attach-point='focusNode'/></div>"
					}))({
						title: "my title",
						"aria-labelledby": "foo"
					});
					doh.is("my title", domAttr.get(fw.focusNode, "title"), "focusNode title");
					doh.is("foo", fw.focusNode.getAttribute("aria-labelledby"), "focusNode labelledby");

					// Mapping attributes with dashes and mixed case
					var mc = new (declare([_WidgetBase, _TemplatedMixin], {
						templateString: "<form></form>"
					}))({
						"accept-charset": "utf8",
						"novalidate": "true"	// parser delivers as lowercase even though it's noValidate in JS obj
					});
					doh.is("utf8", mc.domNode.getAttribute("accept-charset"), "accept-charset");
					if(has("ff") >= 4 || has("ie") >= 10 || has("webkit")){
						// only works for HTML5 compliant browsers where novalidate is understood
						// (also, hasAttribute() is not available on IE6/7)
						doh.t(mc.domNode.hasAttribute("novalidate"), "noValidate");
					}
				},

				// Test custom setters/getter methods
				function customSetters(){
					var CustomSetters = declare([_WidgetBase], {
						foo: 0,
						_setFooAttr: function(val){ this._set("foo", val + 5); },
						_getFooAttr: function(val){ return this._get("foo") - 10; }
					});

					var widget = new CustomSetters({
						foo: 100
					});

					doh.is(105, widget._get("foo"), "custom setter called at initialize time");
					doh.is(95, widget.get("foo"), "custom getter called");

					widget.set("foo", 50);
					doh.is(55, widget._get("foo"), "custom setter called dynamically");
					doh.is(45, widget.get("foo"), "custom getter still called");
				},

				// Test setters for attribute names with dashes
				function settersForNamesWithDashes(){
					var MyWidget = declare([_WidgetBase, _TemplatedMixin], {
						"name-with-dashes": "",
						_setNameWithDashesAttr: {node: "dashNode", type: "innerHTML"},

						templateString: "<div>" +
											"<span data-dojo-attach-point='dashNode'></span>" +
										"</div>"
					});

					var widget = new MyWidget({
						"name-with-dashes": "name with dashes"
					}).placeAt(dom.byId("wrapper"));

					doh.is("name with dashes", widget.get("name-with-dashes"), "get()");
					doh.is("name with dashes", widget.dashNode.innerHTML, "innerHTML");

					widget.set("name-with-dashes", "hello");
					doh.is("hello", widget.dashNode.innerHTML);
				},

				// Test deprecated attr() method (remove for 2.0)
				function attr(){
					var MyWidget = new declare([_Widget, _TemplatedMixin], {
						templateString: "<div><span data-dojo-attach-point=nameNode></span></div>",
						_setNameAttr:  {node: "nameNode", type: "innerHTML"}
					});

					var b = new MyWidget();

					// simple setting
					b.attr("name", "thinger");
					doh.is("thinger", b.attr("name"), "b.attr('name')");
					doh.is("thinger", b.nameNode.innerHTML, "innerHTML");

					// hash setting
					b.attr({
						name: "bang",
						foo: "zap"
					});
					doh.is("bang", b.attr("name"), "hash set of bang");
					doh.is("zap", b.attr("foo"), "hash set of zap");
				},
				
				// Test deprecated attributeMap (remove for 2.0)
				function attributeMap(){
					var AttrMap = declare([_WidgetBase, _TemplatedMixin], {
						attributeMap: {foo: "", bar: "buttonNode", plainText: {node: "plainTextNode", type: "innerText"}},
						templateString: "<div class='class1' style='border: 1px solid red; width: 456px'>" +
											"<button data-dojo-attach-point='buttonNode,focusNode'>hi</button>" +
											'<span><input data-dojo-attach-point="inputNode" value="input"></span>' +
											"<span data-dojo-attach-point='containerNode'></span>" +
											"<span data-dojo-attach-point='plainTextNode'>original plain text</span>" +
										"</div>"
					});

					var widget = new AttrMap({
						foo:"value1",
						bar:"value2",
						"class":"class2",
						style:"height: 123px",
						plainText: "hello world <>&;"
					}).placeAt(dom.byId("wrapper"));

					// test that attributes specified to constructor were copied over to the DOM
					doh.is("value1", widget.domNode.getAttribute("foo"), "widget.domNode.getAttribute('foo')");
					doh.is("value2", widget.buttonNode.getAttribute("bar"), "widget.domNode.getAttribute('bar')");
					doh.t(domClass.contains(widget.domNode, "class1"), "class1");
					doh.t(domClass.contains(widget.domNode, "class2"), "class2");
					doh.is("123px", widget.domNode.style.height, "height");
					doh.is("456px", widget.domNode.style.width, "width");
					doh.is("hello world &lt;&gt;&amp;;", widget.plainTextNode.innerHTML, "innerHTML");
				},

				// Test that attributes set in the ctor when side effects setter exist
				// are correctly applied
				function ctorDependentAttributes(){
					var TestWidget = declare(_WidgetBase, {
						single: null,
						multiple: [],
						_setSingleAttr: function(value){
							this._set("multiple", value != null ? [value] : null);
							this._set("single", value);
						},
						_setMultipleAttr: function(value){
							this._set("single", value ? (value.length > 0 ? value[0] : null) : null);
							this._set("multiple", value);
						}
					});

					var w1 = new TestWidget({
							single : 5
					});
					var w2 = new TestWidget({
							multiple: [5]
					});
					doh.is(5, w1.get("single"), "w1.single");
					doh.is([5], w1.get("multiple"), "w1.multiple");
					doh.is(5, w2.get("single"), "w2.single");
					doh.is([5], w2.get("multiple"), "w2.multiple");
				},

				function moreCorrelatedProperties(){
					var Widget = declare([_WidgetBase], {
						foo: 10,
						_setFooAttr: function(val){
							this._set("foo", val);
							this._set("bar", val + 1);
						},

						bar: 11,
						_setBarAttr: function(val){
							this._set("bar", val);
							this._set("foo", val - 1);
						}
					});

					var w1 = new Widget({foo: 30});
					doh.is(30, w1.get("foo"), "w1.foo");
					doh.is(31, w1.get("bar"), "w1.bar");

					var w2 = new Widget({bar: 30});
					doh.is(30, w2.get("bar"), "w2.bar");
					doh.is(29, w2.get("foo"), "w2.foo");

					var w3 = new Widget({});
					doh.is(10, w3.get("foo"), "w3.foo");
					doh.is(11, w3.get("bar"), "w3.bar");
				}
			]);	// doh.register()

			doh.run();

		});	// require()

	</script>
</head>
<body>
	<h1>Dijit widget.get()/set() Unit Test</h1>
	<div id="wrapper"></div>
</body>
</html>
